<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>测试</title>
	</head>

	<body>
		<canvas id="canvas">
			浏览器不支持canvas。
		</canvas>
	</body>
	<script>
		var ball = {
			x: 512,
			y: 100,
			r: 20,
			g: 20,
			speedX: -10,
			speedY: -30,
			color: '#ff3c00'
		};
		window.onload = function() {
			var canvas = document.querySelector('#canvas');
			canvas.width = 1024;
			canvas.height = 768;
			var context = canvas.getContext('2d');
			setInterval(function() {
				run(context);
				update();
			}, 50);
			}

			function update() {
				ball.x += ball.speedX;
				ball.y += ball.speedY;
				ball.speedY += ball.g;
				if (ball.y >= 768 - 2*ball.r) {
					ball.y = 768 - 2*ball.r;
					ball.speedY = -ball.speedY*0.5;
				}
			}

			function run(txt) {
				txt.clearRect(0, 0, txt.canvas.width, txt.canvas.height);
				txt.beginPath();
				txt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
				txt.closePath();
				txt.fillStyle = ball.color;
				txt.fill();
			}
	</script>

</html>